<template>
      <div class="main">
        <img style="width: 100%;height: auto;" src="../../assets/images/top.png"/>
        <i @click="goUrl" class="el-icon-arrow-left" style="color: #fff;font-size: 40px;font-weight: 600;position: absolute;top:20px;left:50px;"></i>
        <div style="display: flex;width: 96%;margin:0 2%;height: 90%;">
            <cockpitLeft style="width: 33%;"></cockpitLeft>
            <cockpitCenter style="width: 40%;"></cockpitCenter>
            <cockpitRight style="width: 33%;"></cockpitRight>
        </div>
        <img style="width: 100%;position: absolute;bottom: 0px;" src="../../assets/images/bottom.png"/>
      </div>
  </template>
  
  <script>
  import cockpitLeft from "../cockpit/components/left.vue";
  import cockpitCenter from "../cockpit/components/center.vue";
  import cockpitRight from "../cockpit/components/right.vue";
  export default {
    name: "cockpit",
  
    data() {
      return {};
    },
    components: {
        cockpitLeft,
        cockpitCenter,
        cockpitRight,
    },
  
    mounted() {},
  
    methods: {
      goUrl(){
        this.$router.push({ path:"/tuoku/count"}).catch(()=>{});
      },
    },
  };
  </script>
  
  <style scoped>
    body{
      margin:0,
    }
   .main{
    width: 100%;
    height: 100%;
    background-color: #0d1013;
    background-image: url(../../assets/images/back.png);
    background-size: cover;
    background-position: bottom right;
   }
  </style>